<script>
import { ref } from 'vue';
import cardDemo from "/src/components/cardDemo.vue"
import img1 from "/src/assets/avatar.jpg"
import icon from "/src/assets/icon.png"
// import axios from "axios";
import {ElMessage} from "element-plus";
import axios from "axios";

export default {
  name:'MainPage',
  components:{cardDemo},
  mounted(){

    const userData = JSON.parse(sessionStorage.getItem('token'));
    this.token = userData.token;
    this.userID = userData.userID;
    axios.defaults.headers.common['Authorization'] = `${this.token}`;

    // 获取领养文章列表
    const response = axios.get('http://localhost:8080/passageList/adopt',{});
    response.then((result) => {
      // 这里的result就是Promise被解决后的返回值，也就是[[PromiseResult]]对应的值
      console.log(result);
      this.passageList = result.data.PassageList;
      console.log(this.passageList);
    }).catch((error) => {
      console.log(error);
    });
    // 获取头像
    const response_1 = axios.get('http://localhost:8080/users/'+this.userID);
    response_1.then((result) => {
      // 这里的result就是Promise被解决后的返回值，也就是[[PromiseResult]]对应的值
      console.log(result);
      this.avatar = result.data.ProfilePhoto;
    }).catch((error) => {
      console.log(error);
    });
  },
  data(){
    return {
      img1,icon,
      input:ref(''),
      token:ref(''),
      userID:ref(0),
      passageList:ref([]),
      avatar:ref(null),
      hasNewMessages: true
    }
  },
  methods:{
    // 头像点击
    avaClick(){
      this.$router.push({path:'/UserPage',query:{id:this.userID}})
    },
    // 搜索点击
    searchClick(){
      if(this.input === ''){
        ElMessage({
          message: '请输入搜索关键字',
          type: 'error',
          style: 'font-size:25px;font-weight:bold;',
          center: true,
          offset: 55,
          duration:1200
        })
      }
      else{
        this.$router.push({path:'/SearchPage/general',query:{id:this.input}})
      }
    },
    discoverClick(){
      this.$router.push({path:'/MainPage'})
    },
    msgClick(){
      this.$router.push({path:'/Message/like'})
    },
    postClick(){
      this.$router.push({path:'/PostPage'})
    },
    adoptClick(){
      this.$router.push({path:'/AdoptPageMessage'})
    }
  }
}
</script>

<template>
  <div class="layout" style="height:100vh;">
    <el-container >
      <el-header class="header" >
        <el-row
            justify="space-between"
            style="padding-top: 10px;padding-bottom: 10px">

          <!--头像-->
          <img :src="icon"
               style="width:55px;height:55px;"
               alt=""/>

          <div class="InputContainer">
            <input @keyup.enter="searchClick" type="text" name="text" v-model="this.input" class="input" id="input" placeholder="发现更多……" autocomplete="off">
            <button class="searchBut" @click="searchClick"><svg viewBox="0 0 530 530" class="searchIcon"><path d="M416 208c0 45.9-14.9 88.3-40 122.7L502.6 457.4c12.5 12.5 12.5 32.8 0 45.3s-32.8 12.5-45.3 0L330.7 376c-34.4 25.2-76.8 40-122.7 40C93.1 416 0 322.9 0 208S93.1 0 208 0S416 93.1 416 208zM208 352a144 144 0 1 0 0-288 144 144 0 1 0 0 288z"></path></svg>
            </button>
          </div>

          <el-avatar
              :class="'avatar'"
              :src="this.avatar"
              :fit="'cover'"
              :shape="'circle'"
              :size="55"
              @click="avaClick"
          />
        </el-row>
      </el-header>

      <el-container>
        <el-aside>
          <el-menu
              active-text-color="#FFD466"
              default-active="2"
          >
            <el-menu-item class="aside" index="1" @click="discoverClick">
              <el-icon :size="25" style="margin-right:10px;"><House /></el-icon>
              <span>发现</span>
            </el-menu-item>
            <el-menu-item class="aside" index="2" @click="adoptClick">
              <el-icon :size="25" style="margin-right:10px;"><Star /></el-icon>
              <span>领养</span>
            </el-menu-item>
            <el-menu-item class="aside" index="3" @click="msgClick">
              <el-icon :size="25" style="margin-right:10px;"><Message /></el-icon>
              
                  <span>消息</span>
              
            </el-menu-item>
            <el-menu-item class="aside" index="4" @click="postClick">
              <el-icon :size="25" style="margin-right:10px;"><CirclePlus /></el-icon>
              <span>发布</span>
            </el-menu-item>
          </el-menu>
        </el-aside>


        <el-container>
          <el-header style="height:40px;">
            <el-menu
                default-active="1"
                style="display: flex;justify-content: center;height:40px;"
                active-text-color="#FFD466"
                mode="horizontal"
            >
              <el-menu-item class="chose" index="1" style="margin-right:15px" @click="recommendClick">推荐领养</el-menu-item>
              <el-menu-item class="chose" index="2" @click="adoptClick">你的领养进程</el-menu-item>
            </el-menu>
            <!--                  <Menu_1/>-->
          </el-header>

          <el-main  class="mainPage">
            <el-row style="justify-content:start;margin-left:45px;gap:15px;">
              <cardDemo
                  v-for="passage in passageList"
                  :key="passage.PassageID"
                  :passage="passage"
                  :token="this.token"
                  :deleteAble="false"
              />
            </el-row>

          </el-main>
        </el-container>
      </el-container>


    </el-container>
  </div>
</template>


<style scoped>
.el-avatar{
  cursor: pointer;
}
.el-menu{
  border:0!important;
}
/*header样式*/
.header{
  /*background-color:black;*/
  height:60px;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1000;
  margin-bottom:20px;
}

/*搜索框样式*/
.InputContainer {
  height: 40px;
  margin-top:5px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: rgb(255, 255, 255);
  border-radius: 10px;
  overflow: hidden;
  cursor: pointer;
  padding-left: 15px;
  box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.075);
}
.input {
  width: 200px;
  height: 100%;
  border: none;
  outline: none;
  font-size: 15px;
  caret-color: black;
}
.searchIcon {
  margin-top:3px;
  width: 12px;
}
.searchBut {
  padding: 0 15px 0 12px;
  border: none;
  background-color: transparent;
  height: 40px;
  cursor: pointer;
  transition-duration: .3s;
}
.searchBut:hover {
  background-color: #FFE9B2;
  transition-duration: .3s;
}

/*aside*/
.el-aside{
  margin-left: 10px;
  width:180px;
  height:calc(100vh - 70px);
  padding-top:23vh;
}

.aside{
  height:65px;
  font-size:18px;
  font-weight:bold;
  display: flex;
  justify-content: center;
  align-items: center;
}
::v-deep(.aside:hover){
  background-color: #FFE9B2;
}

/*menu*/
.el-menu{
  border:0!important;
}

.chose{
  font-size:18px;
  font-weight:bold;
}
::v-deep(.chose:hover){
  background-color: #FFE9B2!important;
  color:#FFD466!important;
}
.el-menu-item.is-active{
  background-color: white!important;
  color:#FFD466!important;
}



/*主页面*/
.mainPage{
  height:50vh;
}

</style>


